<template>
  <div style="height:100%">
    <div class="homePageCard">
      <div class="cardTitle flexBetween padding5-10 fontSize18 fontWeight">
        <div class="titleName">响应命令单</div>
        <a @click="goRouter('EmergencyResponselist')">更多<i class="el-icon-d-arrow-right" color="#fff"></i></a>
      </div>
      <div class="overflowY">
        <div v-for="(item,index) in Response" :key="index" @click="goResponseDetail(item.id,item.responseName,index,item.emergencyEventIds, item.effectRange)" @dblclick="dblclick(item.id)">
          <div class="department backgroundColor NewEarlyWarn margin5-10 flexBetween padding10" :class="index == isIndex ? 'borderStyle' : ''">
            <div class="LocalEW fontWeight">
              {{item.responseName}}
            </div>
            <div class="Levelbtn">
              <button class="borderRed fontWeight" v-if="item.responseLvCode === '1'">{{item.responseLvName}}</button>
              <button class="borderOrange fontWeight" v-if="item.responseLvCode === '2'">{{item.responseLvName}}</button>
              <button class="borderYellow fontWeight" v-if="item.responseLvCode === '3'">{{item.responseLvName}}</button>
              <button class="borderBlue fontWeight" v-if="item.responseLvCode === '4'">{{item.responseLvName}}</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="homePageCard marginT5">
      <div class="cardTitle flexBetween padding5-10 fontSize18 fontWeight">
        <div class="titleName">应急事件</div>
        <a @click="goRouter('EmergencyList')">更多<i class="el-icon-d-arrow-right" color="#fff"></i></a>
      </div>
      <div class="overflowY">
        <div v-for="(item,index) in ReportEvent" :key="index" @click="goReportEvent(item.id)">
          <div class="flexBetween department backgroundColor NewEarlyWarn margin5-10 padding10">
            <div style="width:80%">
              <div class="LocalEW fontWeight" style="width:100%">
                {{item.emergencyEvent}}
              </div>
              <div class="white fontSize12">{{item.occurrenceTime}}</div>
            </div>
            <div class="white fontSize14">{{item.infoSource}}</div>
          </div>
        </div>
      </div>
    </div>
    <LsdDialog :dialogConfig="dialogConfig" @close="close">
      <ResponseDetail slot="dialog" :ifId="ifId"></ResponseDetail>
    </LsdDialog>
  </div>
</template>

<script>
import { GetResponse, GetReportEvent } from "@/api/EmergencyDisposal/homepagecontent.js";
import ResponseDetail from "./ResponseDetail.vue";
export default {
  name: "ResponseDetails",
  components: {
    ResponseDetail
  },
  data() {
    return {
      Response: [],
      ReportEvent: [],
      isIndex: 0,
      timer: null,
      ifId: "",
      dialogConfig: {
        title: "响应命令单详情",
        isShow: false, // 弹窗显示隐藏
        width: "80%"
      }
    };
  },
  mounted() {
    this.GetResponses();
  },
  methods: {
    async GetResponses() { // 命令单
      const res = await GetResponse();
      this.Response = res;
      this.GetReportEvents(res[0].emergencyEventIds); // 默认显示第一条命令单的应急事件
      this.$eventBus.$emit("changeRepairData", 0, res[0].id);
    },
    GetReportEvents(eventIds) { // 应急事件
      GetReportEvent({ eventIds }).then(res => {
        this.ReportEvent = res;
      });
      // this.$emit("ReportEvents", res);
    },
    getYjtzdCity(effectRange, index = 1) {
      const arr = effectRange.split("、").filter(el => el.includes("县") || el.includes("市") || el.includes("区"));
      // const arr = effectRange.split("、");
      const newEffList = [];
      arr.forEach(el => {
        if (el.startsWith("湖北省") && (!el.endsWith("省"))) {
          newEffList.push(el.split("省")[1]);
        } else {
          newEffList.push(el);
        }
      });
      const list = [];
      newEffList.forEach(el => {
        if (el.endsWith("县") || el.endsWith("区")) {
          if (el.includes("市")) {
            list.push(el.split("市")[1]);
          } else {
            list.push(el);
          }
        } else if (el.endsWith("市")) {
          if (el.includes("自治州")) {
            list.push(el.split("自治州")[1]);
          } else {
            const index1 = el.indexOf("市");
            const index2 = el.lastIndexOf("市");
            if (index1 === index2) {
              list.push(el);
            } else {
              list.push(el.slice(index1 + 1));
            }
          }
        }
      });
      const newList = [...new Set(list)];
      this.initLayer(newList[0]);
    },
    initLayer(name = "湖北省") {
      console.log(name);
      this.$eventBus.$emit("createlayer", name);
    },
    goResponseDetail(id, responseName, index, emergencyEventIds, effectRange) { // 最新命令单的事件流
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.isIndex = index;
        this.GetReportEvents(emergencyEventIds); // 点击命令单的应急事件
        this.$emit("ChooseResponse", id, responseName, emergencyEventIds, index);
        this.getYjtzdCity(effectRange);
        this.$eventBus.$emit("changeRepairData", index, id);
        this.$eventBus.$emit("changeTeamData", index);
        this.$eventBus.$emit("changeTeamCar", index);
        this.$eventBus.$emit("changeTeamYjzb", index);
      }, 300);

      // this.$router.push({
      //   name: "EmergencyResponseinfo",
      //   query: { id }
      // })
    },
    goReportEvent(id) {
      this.$router.push({
        name: "EmergencyDetail",
        query: { id }
      });
    },
    goRouter(name) {
      this.$router.push({
        name: name,
        query: {}
      });
    },
    dblclick(id) {
      this.ifId = id;
      this.dialogConfig.isShow = true;
      clearTimeout(this.timer);
    },
    close() {
      this.dialogConfig.isShow = false;
    }
  }
};
</script>

<style scoped lang="less">
.homePageCard{
  height: 44.2%;
}
.yjsj {
  padding: 10px 20px 10px 10px;
}
.overflowY {
  height: 72%;
  overflow-y: auto;
}
:deep(div::-webkit-scrollbar-track) {
  border-radius: 0;
  background: transparent;
}
:deep(div::-webkit-scrollbar-thumb) {
  border-radius: 10px;
  box-shadow: none;
  background: rgba(215, 215, 215, 0.4);
}
:deep(div::-webkit-scrollbar) {
  width: 5px;
}
:deep(::-webkit-scrollbar-corner) {
  background: transparent;
}
</style>
